<template>

  <div>

    <el-form label-width="100px" label-position="left">

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户编号">
            <el-input v-model="postForm.id" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号">
            <el-input v-model="postForm.userName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门">
            <el-input v-model="postForm.deptCode_dictText" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名">
            <el-input v-model="postForm.realName" />
          </el-form-item>
        </el-col>
        <el-col v-if="siteData.faceLogin" :span="24">
          <el-form-item label="人脸照片">
            <file-upload v-model="postForm.face" :compress="2000" tips="用于人脸登录，需要保证正脸位于图片中央，图片质量会影响识别率" accept=".jpg,.png,jpeg" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input v-model="postForm.idCard" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱">
            <el-input v-model="postForm.email" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="手机号码">
            <div v-if="postForm.mobile" style="font-size: 16px; font-weight: 700">
              {{ postForm.mobile }}
              <el-button type="primary" size="mini" @click="showBind">解绑手机</el-button>
            </div>
            <div v-else>
              <el-button type="danger" size="mini" @click="showBind">绑定手机号</el-button>
            </div>
          </el-form-item>
        </el-col>

      </el-row>

      <el-form-item>
        <el-button :loading="loading" type="primary" @click="updateInfo">更新资料</el-button>
      </el-form-item>

    </el-form>

    <bind-mobile
      :visible.sync="bindVisible"
      :type="postForm.mobile?0:1"
      :mobile="postForm.mobile"
      @success="fetchData"
    />

  </div>

</template>

<script>
import { findInfo, updateData } from '@/api/sys/user/user'
import { mapGetters } from 'vuex'
import FileUpload from '@/components/FileUpload'
import BindMobile from '@/views/web/ucenter/components/BindMobile'

export default {
  name: 'UserInfo',
  components: { BindMobile, FileUpload },

  data() {
    return {
      postForm: {},
      bindVisible: false,
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'token',
      'siteData'
    ])
  },

  created() {
    this.fetchData()
  },
  methods: {

    fetchData() {
      findInfo(this.token).then(res => {
        this.postForm = res.data
      })
    },

    updateInfo() {
      this.loading = true

      updateData(this.postForm).then(() => {
        this.loading = false
        this.$notify({
          title: '成功',
          message: '资料修改成功！',
          type: 'success',
          duration: 2000
        })
      }).catch(() => {
        this.loading = false
      })
    },

    showBind() {
      this.bindVisible = true
    }

  }
}
</script>

<style scoped>

  .cert-box{
    line-height: 28px;
  }

  .cert-box .title{

    font-size: 18px;
    font-weight: 700;
    line-height: 50px;
  }

  .cert-box .item{
    color: #555;
  }

  .cert-box .item span{
    font-weight: 700;
  }

</style>

